<template>
  <div>
    <div class="banner" style="overflow: hidden">
      <el-carousel :interval="5000" :height="height" id="bannerMag"  :DetailData="DetailData">
        <el-carousel-item v-for="item in imgUlr" id="Mag" :key="item" >
          <div class="imgBox" >
            <img :src="item">
          </div>
        </el-carousel-item>
      </el-carousel>
      <!--<div class="searchBox">-->
         <!--<div class="search">-->
            <!--<input type="text" placeholder="搜索货物提货号查询运单详情" v-model="input" />-->
           <!--<div class="searchBout " @click="sechlistFn">-->
             <!--<img :src="sech"/>-->
           <!--</div>-->
           <!--<div>-->
             <!--<p v-for="lis in transport">{{lis.id}}</p>-->
           <!--</div>-->
         <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<style scoped>
  /*#bannerMag{height:100%}*/
  /*#Mag{height: auto;position: relative;float: left}*/
  .banner{position:relative;width: 100%}
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  footer{width: 100%;clear: both }

  body{background-color:#f7f7f7}
  .searchBox{ position:absolute;bottom:0px;left:50%;width:6.3rem;height:1rem;z-index:100;}
  .search{ position:absolute;left:-50%;width:6.03rem;height:48px;background-color:rgba(0,0,0,0.35);text-align:left;padding: .28rem .15rem .23rem .15rem;line-height:0rem }
  .search input{border:0px none;background:#fff;padding: .08rem .1rem;width:5.3rem;line-height: .30rem;height:.30rem;border-radius:5px;font-size: .16rem;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .searchBout {position: absolute;right: .15rem;top: .28rem}
  .search input[type=text]{font-size: 12px}
  .searchBout img{width:.48rem; position: relative;cursor: pointer}
  .card{ }
  .imgBox{width: 100%;height: auto;padding: 0px;overflow: hidden}
  .imgBox img{width: 100%;}
  @media (max-width: 1200px) {

  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import imgDeft from '../../../../static/img/banner01.png'
  import sech from '../../../../static/img/icon/sech.png'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    data () {
      return {
        height: '400px',
        sech:sech,
        page:{page:1,pageSize:5,count:0},
        tableData1:{title:'',img:''},
        tableData2:[],
        input:null,
        errorText:'',
        imgUlr:[imgDeft],
      }
    },
    methods: {
      ...mapActions({
        showNewsList: 'showNewsList',
        checkID:'checkId',
        getIntroList: 'Intro',
      }),
      goMap (id) {
        this.$router.push({ name: 'map',query:{page:this.$route.name,id:id} })
      },
      // 去下个页面
      goPage (name) {
        this.$router.push({name: name})
      },
      // 查询
      sechlistFn () {
        var str = this.input
        this.$store.commit('transportListTo', null)
        if (!str) {  this.errorText = '请输入搜索关键字'; return }
        str = str.replace(/(^\s*)|(\s*$)/g, " ")
        if (!str) {
          this.errorText = '请输入搜索关键字'
          return
        }
        this.goMap(this.input)
        // 清空 vuex 列表
        // var parm = {
        //   code: this.input
        // }
        // this.checkID(parm)
        // this.$store.commit('transportListTo', null)
      },
      // 列表解析
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        var time = Public.publicLo.timeCheng()

        for (let i in res) {
          var dom = document.createElement('div')
          dom.innerHTML=res[i].content;
          var text,src = imgdeift
          var domType = ''
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if(domType== 'P'|| domType== '#text' ){
              text = dom.childNodes[k].innerText || dom.childNodes[0].textContent
              break
            }
          }
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if( domType != '#text') {
              var img = dom.getElementsByTagName('img')
              if(img[0]){
                src = img[0].src
              }
            }

            // domType = dom.childNodes[k].nodeName
            // if(domType== 'img' ){
            //   src = dom.childNodes[k].src
            //   console.log(src,'text');
            //   break
            // }
          }
          if(res[i].createTime){
            time = Public.publicLo.timeCheng(res[i].createTime)
          }
          var pu = {
            id: res[i].id,
            title: res[i].title,
            type:res[i].type,
            typeText: res[i].type==1?'普通新闻':'公告',
            creatorId:res[i].creatorId,
            img:src,
            text:text,
            status:res[i].status,
            createTime: time.times,
            statusText: res[i].status==0?'新建': res[i].status==1?'发布':res[i].status==2?'下架':'异常'
          }
          this.tableData2.push(pu)
        }
        var x = Math.ceil(Math.random()* res.length)-1
        this.tableData1 = this.tableData2[x]
      },
      //详情解析
      dataFn(res){
        res=res.body.data
        if(res.homePics){
          if(res.homePics[0]){
            this.imgUlr = res.homePics;
          }
        }
      },
      // 轮播自适应
      size(){
        var imgDom = document.getElementById('bannerMag').getElementsByClassName('el-carousel__container');
        var imgH = document.getElementById('Mag').getElementsByClassName('imgBox')[0].getElementsByTagName('img')
        imgH = imgH[0].clientHeight
        var doc = document.getElementById('bannerMag').getElementsByClassName('el-carousel__container')
        var doc2 = document.getElementById('bannerMag')
        if(imgH<200){
          imgH = 200
        }
        doc2.style = 'height:'+imgH+'px'
        doc[0].style = 'height:'+imgH+'px'
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },

    },
    computed: {
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      transport: function () {
        var parm = this.transportList || null
        // if (parm) {
        //   console.log(parm)
        //   if(parm.code == 1){
        //     this.errorText = '暂无此类订单'
        //    // this.openError(this.errorText)
        //   }
        //   if(parm.code == -1){
        //     this.errorText = '数据请求异常，请稍后重试'
        //    // this.openError(this.errorText)
        //   }
        //   if(parm.code == 0){
        //     this.errorText = null
        //     if(parm.body.data[1]){
        //
        //     }else {
        //         this.$store.commit('transportListTo', null)
        //         this.goMap(parm.body.data[0].id)
        //     }
        //     if(!parm.body.data[0]){
        //       this.errorText = '暂无此类订单'
        //       this.openError(this.errorText)
        //     }
        //   }
        //   parm = parm.body.data
        // }else {
        //   this.errorText = null
        // }
        return 1
      },
      DetailData() {
        var parm = this.Detail
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'show',
        'transportList'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      var parm = {
        string:'string'
      }
      this.getIntroList(parm)
      var that = this
      setTimeout(function () {
        that.size()
      },1000)

      window.onresize = function(){
        that.size()
      }
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

